<template>
    <div class="card-behind">
        <!-- 简介 -->
        <div class="brief">
            <div class="brief-text">
                <p class="tit">内容简介</p>
                <p>{{obj.summary}}</p>
            </div>
        </div>
        <!-- 段落 -->
        <div class="para" v-for="item in obj.words" :key="item.id">
            <div class="img-box">
                <img :src="item.image" alt="">
            </div>
            <div class="order">
                <span>{{item.index}}</span>
            </div>
            <div class="content">
                <p>{{item.content}}</p>
                <div class="line"></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"CardBehind",
    props:{
        obj:{
            type:Object
        }
    }
}
</script>

<style lang="scss" scoped>
.card-behind{
    height: 98%;
    width: 96%;
    background-color: #fff;
    margin: 0 auto;
    margin-top: 5px;
    border-radius: 8px;
    padding: 10px 11px;
    box-sizing: border-box;
    box-shadow:0px 5px 10px 0 rgb(163, 162, 162); 
    overflow-y: scroll;
    // 公共样式
    .brief,.para{
       p{
            font-size: 13px;
            color: #777373;
            line-height: 22px;
        }
    }

    .para{
        .img-box{
            text-align: center;
            img{
                width: (100%-10);
                border-radius: 6px;
            }
        }
    }
    .brief{
        margin-bottom: 20px;
        .brief-text{
            padding: 0 0 15px 0;
            border-bottom: 1px solid #f0f0f0;
            .tit{
                color: #999;
                margin-bottom: 5px;
                padding-left: 8px;
                position: relative;
                &::after{
                    content: "";
                    display: block;
                    width: 2px;
                    height: 12px;
                    background-color: rgb(91,169,151);
                    position: absolute;
                    top: 50%;
                    left: 0;
                    transform: translateY(-6px);
                }
            }
        }
    }
    .para{
        margin-top: 5px;
        .order{
            width: 20px;
            height:20px;
            line-height: 13px;
            background-color: rgb(91,169,151);
            border-radius: 3px;
            position: relative;
            margin: 10px 0;
            &::after{
                content: "";
                display: block;
                width: 0;
                height: 0;
                border: 4px solid transparent;
                border-left:4px solid rgb(91,169,151);
                position: absolute;
                right: -8px;
                top: 6px;
            }
            span{
                font-size: 14px;
                color: #fff;
                font-style: italic;
                margin-left: 4px;
            }
        }
        .content{
            .line{
                width: 20px;
                height: 2px;
                background-color: rgb(91,169,151);
                margin-left: 50%;
                transform: translateX(-10px);
                margin-top: 20px;
            }
        }
        &:last-child{
            .content{
                .line{
                    height: 0;
                }
            }
        }
    }
}
</style>